<template>
	<view class="content" :style="{backgroundColor: template.color.back_color}">
		<view class="details_box" v-if="orderDetail">

			<view v-if="orderDetail.orderStatus==7" class="order_head_box">
				<view class="status">
					<aicon type="roundclosefill" :color="template.color.price_color" size="35"></aicon>
					<span>已失效</span>
				</view>
				<view class="text">
					<span v-if="orderDetail.orderExpireRemainTime<=0">订单已关闭，如有退款将会原路退回</span>
					<span v-else>订单因超时未支付，已被自动取消</span>
				</view>
			</view>
			<view v-if="orderDetail.orderStatus==0" class="order_head_box">
				<view class="status">
					<aicon type="timefill" :color="template.color.price_color" size="35"></aicon>
					<span>待付款</span>
				</view>
				<view class="text">
					<span>请在</span>
					<u-count-down :time="orderDetail.orderExpireRemainTime*1000" format="mm:ss"></u-count-down>
					<span>内完成支付，否则订单将自动取消</span>
				</view>
			</view>
			<view v-else-if="orderDetail.orderStatus==3" class="order_head_box">
				<view class="status">
					<aicon type="deliver_fill" :color="template.color.price_color" size="35"></aicon>
					<span>待收货</span>
				</view>
				<view class="text">
					<span>订单已发货，请注意接听快递来电</span>
				</view>
			</view>
			<view v-else-if="orderDetail.orderStatus==2" class="order_head_box">
				<view class="status">
					<aicon type="deliver_fill" :color="template.color.price_color" size="35"></aicon>
					<span>{{orderDetail.logisticsType == 1?'待发货':'待自提'}}</span>
				</view>
				<view class="text">
					<span v-if="orderDetail.logisticsType == 1">订单正在备货中，请耐心等待</span>
					<span v-if="orderDetail.logisticsType == 3">下单成功，待用户自提</span>
				</view>
			</view>
			<view v-else-if="orderDetail.orderStatus==1" class="order_head_box">
				<view class="status">
					<aicon type="roundcheckfill" :color="template.color.price_color" size="35"></aicon>
					<span>已付款</span>
				</view>
				<view class="text">
					<span>付款完毕，等待发货</span>
				</view>
			</view>
			<view v-else-if="orderDetail.orderStatus==5" class="order_head_box">
				<view class="status">
					<aicon type="roundcheckfill" :color="template.color.price_color" size="35"></aicon>
					<span>已完成</span>
				</view>
				<view class="text">
					<span>订单已完成，期待您的下次光临</span>
				</view>
			</view>

			<view class="menu_box box_shadow" v-if="orderDetail.logisticsType == 1 && orderDetail.orderStatus == 3">
				<view class="head">
					<view class="left">
						<span>物流信息</span>
					</view>
					<view class="right"></view>
				</view>
				<view class="info_box">
					<view class="label">
						<view class="tit">物流公司</view>
						<view class="txt">{{orderDetail.orderLogistics.expressName}}</view>
					</view>
					<view class="label" @click="copy(orderDetail.orderLogistics.expressNo)">
						<view class="tit">物流单号</view>
						<view class="" style="color: #a6a9aa;font-size: 24rpx;">(点击复制)</view>
						<view class="txt">{{orderDetail.orderLogistics.expressNo}}</view>
					</view>
					<view class="label" @click="getPhone(orderDetail.orderLogistics.riderPhone)">
						<view class="tit" style="width: 190rpx;">物流联系电话</view>
						<view class="" style="color: #a6a9aa;font-size: 24rpx;">(点击拨打)</view>
						<view class="txt">
							{{orderDetail.orderLogistics.riderPhone}}
						</view>
					</view>
				</view>
			</view>
			<view class="menu_box box_shadow" v-if="orderDetail.logisticsType == 3">
				<view class="head">
					<view class="left">
						<span>自提信息</span>
					</view>
					<view class="right"></view>
				</view>
				<view class="info_box">
					<view class="label">
						<view class="tit">商家电话</view>
						<view class="txt">{{storeInfo.businessMobile}}</view>
					</view>
					<view class="label">
						<view class="tit">商家地址</view>
						<view class="">
							{{addessData.address}}
						</view>
					</view>
				</view>
			</view>

			<view class="menu_box box_shadow">
				<view class="head">
					<view class="left">
						<span>商品信息</span>
					</view>
					<view class="right">

					</view>
				</view>
				<view class="goods_box">
					<view class="goods" v-for="(item, index) in orderDetail.orderItemList" :key="item.id">
						<view class="left">
							<view class="" v-if="item.goodsSpecification !== null && item2.goodsSpecification.specificationImages" >
								<image 
									:src="item.goodsSpecification.specificationImages" lazy-load="true" mode="aspectFill">
								</image>
							</view>
							<view class="" v-else  >
								<image :src="item.previewUrl" lazy-load="true" mode="aspectFill"></image>
							</view>
							
						</view>
						<view class="right">
							<view class="title">{{item.goodName}}</view>
							<view class="goodsSpecification" v-if="item.goodsSpecification!=null" >
								<view class="text" 
									v-for="(value,key) in JSON.parse(item.goodsSpecification.specificationName)"
									:key="key">{{key+':'+value}}</view>
							</view>
							<view class="price">
								<view>
									<view v-if="item.plugsGoods.goodsType==0">
										<view class="num" v-if="item.goodsSpecification!=null">
											{{item.goodsSpecification.dealPrice}}<span>元</span>
										</view>
										<view class="num" v-else>{{item.goodsPrice}}<span>元</span></view>
									</view>
									<view v-else-if="item.plugsGoods.goodsType==1">
										<view class="num" v-if="item.goodsSpecification!=null">
											{{item.goodsSpecification.dealPrice}}<span>积分</span>
										</view>
										<view class="num" v-else>{{item.goodsPrice}}<span>积分</span></view>
									</view>
								</view>
								<view class="buy">x{{item.goodsNum}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="menu_box box_shadow">
				<view class="head">
					<view class="left">
						<span>支付信息</span>
					</view>
					<view class="right"></view>
				</view>
				<view class="info_box" style="padding-bottom: 0;">
					<view class="label">
						<view class="tit">商品合计</view>
						<view class="txt" v-if="orderDetail.orderItemList[0].plugsGoods.goodsType==0">
							¥{{orderDetail.totalMoney}}</view>
						<view class="txt" v-if="orderDetail.orderItemList[0].plugsGoods.goodsType==1">
							{{orderDetail.totalMoney}}积分
						</view>
					</view>
					<view class="order_foot">
						<view class="label">
							<view class="tit">实际应付</view>
							<view class="txt" v-if="orderDetail.orderItemList[0].plugsGoods.goodsType==0">
								¥{{orderDetail.payMoney}}</view>
							<view class="txt" v-if="orderDetail.orderItemList[0].plugsGoods.goodsType==1">
								{{orderDetail.payMoney}}积分
							</view>
						</view>
					</view>
					<view class="order_foot">
						<view class="label">
							<view class="tit">优惠金额</view>
							<view class="txt" v-if="orderDetail.orderItemList[0].plugsGoods.goodsType==0">
								¥{{orderDetail.couponPrice}}</view>
							<view class="txt" v-if="orderDetail.orderItemList[0].plugsGoods.goodsType==1">
								{{orderDetail.couponPrice}}积分
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="menu_box box_shadow">
				<view class="head">
					<view class="left">
						<span>订单信息</span>
					</view>
					<view class="right"></view>
				</view>
				<view class="info_box">
					<view class="label">
						<view class="tit">订单状态</view>
						<view class="txt">
							<span v-if="orderDetail.orderStatus==0 ">待付款</span>
							<span v-else-if="orderDetail.orderStatus==2">{{orderDetail.logisticsType == 1?'待发货':'待自提'}}</span>
							<span v-else-if="orderDetail.orderStatus==1">已付款</span>
							<span v-else-if="orderDetail.orderStatus==3">待收货</span>
							<span v-else-if="orderDetail.orderStatus==5">已完成</span>
							<span v-else-if="orderDetail.orderStatus==7">已失效</span>
							<span v-else-if="orderDetail.orderStatus==8">退款中</span>
							<span v-else-if="orderDetail.orderStatus==9">已退款</span>
						</view>
					</view>
					<view class="label" v-if="orderDetail.payTime">
						<view class="tit">支付时间</view>
						<view class="txt">{{orderDetail.payTime}}</view>
					</view>
					<view class="label">
						<view class="tit">下单时间</view>
						<view class="txt">{{orderDetail.createTime}}</view>
					</view>
					<view class="label">
						<view class="tit">订单编号</view>
						<view class="txt">{{orderDetail.orderNo}}</view>
					</view>
					<view class="label">
						<view class="tit">订单备注</view>
						<view class="txt">{{orderDetail.orderRemark}}</view>
					</view>
					<view class="" v-if="orderDetail.orderLogistics.payType!==3 && orderDetail.payRecord[0].payWay==1">
						<view class="label" style="text-align: center;"
							v-if="orderDetail.orderStatus==1 || orderDetail.orderStatus==2"
							@click="Torefund(orderDetail.orderNo)">
							<view class="refund-text"
								style="width: 100%;margin: 0 auto;background-color: #c5c9ca;color: #fff;border-radius: 40rpx;height: 60rpx;line-height: 60rpx;">
								申请退款</view>
							<!-- <view class="txt">{{orderDetail.orderNo}}</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="seat_box">
			<view class="seat"></view>
		</view>
		<view class="footer box_shadow">
			<view class="label">
				<view v-if="orderDetail.orderStatus==0" class="button" :style="{backgroundColor: _temp_themeColor}" >
					<view v-if="orderDetail.orderItemList[0].plugsGoods.goodsType==0" class="" @click="getPaypalOrder()"
						>立即支付</view>
					<view v-else-if="orderDetail.orderItemList[0].plugsGoods.goodsType==1" class="" @click="scorePay()"
						>立即支付</view>
				</view>
				<view v-else-if="orderDetail.orderStatus==7 " class="button" style="color: #da5000;">订单失效</view>
				<view v-else-if="orderDetail.orderStatus==2 && orderDetail.logisticsType == 3" class="button"
					:style="{backgroundColor: _temp_themeColor}" @click="zitipopup()">确认自提</view>
				<view v-else-if="orderDetail.orderStatus==3" class="button" style="color: #da5000;">待收货</view>
				<view v-else-if="orderDetail.orderStatus==1" class="button" style="color: #da5000;">已付款</view>
				<view v-else-if="orderDetail.orderStatus==5" class="button" style="color: #da5000;">已完成</view>
				<view v-else-if="orderDetail.orderStatus==9" class="button" style="color: #da5000;">已退款</view>
			</view>
		</view>
		<!-- 自提信息弹框二维码 -->
		<u-popup :show="show" :round="10" mode="center" bgColor="#19be6b" @close="close" @open="open">
			<view>
				<view class="store_box" @click="">
					<view class="store">
						<view class="left">
							<view class="title">
								<view style="font-weight: bold;">{{storeInfo.businessName}}</view>
								<view class="">
									<view class="businessStatus" v-if="Timelist.length>0">
										营业中
									</view>
									<view class="businessStatus" v-else>
										休息中
									</view>
								</view>
							</view>
							<view class="address time">{{storeInfo.businessAddress.address}}</view>
							<view class="time">
								营业时间:{{storeInfo.businessHours[0].businessStartTime}}~{{storeInfo.businessHours[0].businessEndTime}}
							</view>
						</view>
						<view class=""
							style="height: 100%;display: flex;flex-direction: column;justify-content: space-between;">
							<view class="right">
								<view class="right-box" style="margin-right: 12rpx;"
									@click.stop="getPhone(storeInfo.businessMobile)">
									<u-icon name="phone-fill" color="#19be6b" size="20"></u-icon>
								</view>
								<view class="right-box"
									@click.stop="openMap(storeInfo.businessAddress.longitude,storeInfo.businessAddress.latitude)">
									<u-icon name="map-fill" color="#19be6b" size="20"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="times">
					{{date}}
				</view>
				
				<view
					style="background-color: #fff;border-radius: 6rpx;color: #19be6b;width: 140rpx;height: 46rpx;text-align: center;line-height: 46rpx;margin:30rpx auto;">
					待自提
				</view>
				<canvas canvas-id="qrcode" v-show="qrShow" style="width: 300rpx;margin: 0 auto;height: 300rpx;" />
				<view @click="zitiBtn" class=""
					style="width: 400rpx;height: 70rpx;text-align: center;line-height: 70rpx;background-color: #fff;color: #19be6b;border-radius: 40rpx;margin: 50rpx auto;">
					确认自提
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import uQRCode from '@/tools/utils/uqrcode.js'
	import JSONBig from 'json-bigint'
	import {
		partnerAppletsWechatOrderPay,
		integralOrderPay,
		getBusinessInfoById,
		getOrderInfoById,
		verificationOrder
	} from "@/tools/request/api.js"
	export default {
		data() {
			return {
				id: '',
				orderDetail: '',
				paypalShow: '',
				userData: '',
				start: '',
				end: '',
				payList: '',
				day: '',
				limitData: '',
				addessData: '',
				totaldata: '',
				creatOrderTime: '',
				verCode: '',
				qrShow: false,
				show: false,
				Timelist: [],
				date: '',
				ordertype:'',
				integral:''
			}
		},
		onLoad(e) {
			let self = this;
			self.id =e.id;
			// console.log(e,'666666666');
			// return
			self.ordertype = e.ordertype;
			self.integral=e.integral;
			self.getOrderDetail();
			this.setTime = setInterval(() => {
				let date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				month >= 9 ? month : month = '0' + month
				let day = date.getDate()
				day >= 9 ? day : day = '0' + day
				let hour = date.getHours()
				hour >= 9 ? hour : hour = '0' + hour
				let minute = date.getMinutes()
				minute >= 9 ? minute : minute = '0' + minute
				let second = date.getSeconds()
				second >= 9 ? second : second = '0' + second
				this.date = year + '-' + month + '-' + day + "  " + hour + ":" + minute + ":" + second
			}, 1000)
		},
		onHide() {
			clearInterval(this.setTime)
		},
		onShow() {
			let self = this;
		},

		methods: {
			getPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			copy (value) {
				uni.setClipboardData({
				    data: value
				})
			},
			// 打开地图导航
			openMap(lon, lat) {
				uni.getLocation({
					success: res => {
						uni.openLocation({
							latitude: parseFloat(lat),
							longitude: parseFloat(lon),
							scale: 18
						})
					}
				})
			},
			open() {
				
			},
			close() {
				this.show = false
			},
			zitipopup(){
				this.show=true;
				this.getQrcode(this.verCode);
				this.getStoreInfo()
			},
			zitiBtn(){
				let self=this;
				uni.showModal({
					title: '提货确认',
					content: '是否确认已经到门店提完所有货物?',
					success: function (res) {
						if (res.confirm) {
							self.Confirmpickup()
						} else if (res.cancel) {
							
						}
					}
				});
			},
			Confirmpickup() {
				let self = this;
				verificationOrder({verificationCodeStr: self.verCode}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '取货成功'
						})
						this.show=false;
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 600)
					} else {
						uni.showToast({
							title: res.msg
						})
					}
				})
			},
			timestampToTime2(timestamp) {
				let self = this;
				let date = new Date(timestamp)
				let Y = date.getFullYear() + '-'
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
				let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
				let H = date.getHours() + ':'
				let M2 = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
				let S = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
				return Y + M + D + H + M2 + S
			},
			Torefund(i) {
				uni.navigateTo({
					url: `/pages/order/refund/refund?id=${i}`
				})
			},
			getData() {
				let self = this;
				let DateList = uni.getStorageSync('dateList');
				self.start = DateList.slice(0, 1);
				self.end = DateList.slice(DateList.length - 1);
				self.day = DateList.length - 1;
			},
			provinceText(text) {
				if (text) {
					let str = text.replace(/,/g, '');
					return str
				}
			},
			specNameText(data) {
				let list = Object.keys(data);
				let str = '';
				list.forEach((itm, idx) => {
					str += `${data[itm]}${(idx+1)===list.length?'':','}`
				})
				return str
			},
			getOrderDetail() {
				let self = this;
				uni.showLoading({
					title: '订单加载中',
					mask: true
				});
				getOrderInfoById({id: self.id}).then(res => {
					if (res.code === 200) {
						uni.hideLoading();
						let list = res.body;
						self.orderDetail = list;
						self.addessData = JSON.parse(list.orderLogistics.receiverAddressJson);
						let timestamp = list.createTime;
						let payTime = list.payTime;
						let list2 = list.orderItemList;
						let codeArry = []
						list2.forEach(item => {
							codeArry.push(item.verificationCode)
						})
						self.verCode = codeArry.toString();
					} else {
						uni.hideLoading();
					}
				})
			},
			getStoreInfo() {
				// getBusinessInfoById({businessId: this.businessId}).then(res => {
				// 	if (res.code == 200) {
				// 		this.storeInfo = JSON.parse(res.body.jsonData);
				// 		let list = this.storeInfo.businessHours;
				// 		let listArr = [];
				// 		list.forEach(item => {
				// 			let data = this.checkAuditTime(item.businessStartTime, item.businessEndTime);
				// 			listArr.push(data)
				// 		})
				// 		this.Timelist = listArr.filter(item => item == true);
				// 	}
				// })
				
				let list = this.storeInfo.businessHours;
				let listArr = [];
				list.forEach(item => {
					let data = this.checkAuditTime(item.businessStartTime, item.businessEndTime);
					listArr.push(data)
				})
				this.Timelist = listArr.filter(item => item == true);
				
			},
			getQrcode(text) {
				this.qrShow = true;
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: text,
					size: 150,
					margin: 0,
					backgroundColor: '#19be6b',
					foregroundColor: '#fff',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						
					}
				})
			},
			getPaypalOrder() {
				let self = this;
				let postData = {
					"client": "小程序",
					"openId": self.openId,
					"orderId": self.orderDetail.id,
					"orderNo": self.orderDetail.orderNo,
					"payMoney": self.orderDetail.payMoney,
					"payWay": 1,
					"payType":0
				}
				uni.showLoading({
					title: '支付准备中',
					mask: true
				});
				partnerAppletsWechatOrderPay(postData).then(res => {
					if (res.code === 200) {
						self.payList = res.body;
						let data = res.body;
						uni.hideLoading();
						self.time = Date.now();
						wx.requestPayment({
							'appId': self.payList.appid,
							'nonceStr': self.payList.noncestr,
							'package': self.payList.package,
							'signType': 'RSA',
							'timeStamp': self.payList.timestamp,
							'paySign':self.payList.sign,
							success: function(res) {
								this.show = false;
								uni.showToast({
									title: '微信支付成功'
								});
								setTimeout(function() {
									uni.navigateTo({
										url: `/pages/subPack/paysuccess?id=${self.orderDetail.id}&&money=${self.orderDetail.payMoney}`
									});
								}, 600);
							},
							fail: function(err) {
								console.log(err, '错误信息')
								uni.showModal({
									title: '支付失败',
									content: '订单支付失败，请重新进行支付。如对订单金额有疑问请联系客服人员',
									showCancel: false
								})
								return
							}
						});
					} else {
						uni.hideLoading();
						uni.showModal({
							title: '支付失败',
							content: res.msg,
							showCancel: false
						})
					}
				})
			},
			// 积分支付
			scorePay(){
				let self=this;
				if(self.integral< self.orderDetail.payMoney || self.integral==null){
					uni.showModal({
						title: '提示',
						content: '积分不足',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:'/pages/subPack/pointsmall'
								})
							} else if (res.cancel) {
							}
						}
					});
					return;
				}
				
				let postdata={
					"client": "小程序",
					"extParm": "",
					"openId": self.openId,
					"orderId":  self.orderDetail.id,
					"orderNo":  self.orderDetail.orderNo,
					"payMoney":  self.orderDetail.payMoney,
					"payType": 0,
					"payWay":3,
					"businessId":self.businessId
				}
				uni.showLoading({
					title: '支付准备中',
					mask: true
				});
				integralOrderPay(postdata).then(res=>{
					if(res.code==200){
						uni.hideLoading();
						uni.showToast({
							title: '积分支付成功'
						});
						setTimeout(function() {
							
							uni.redirectTo({
								url: `/pages/subPack/paysuccess?id=${self.orderDetail.id}&&money=${self.orderDetail.payMoney}&&score=1`
							});
						}, 600);
					}else{
						uni.hideLoading();
						uni.showToast({
							title: res.msg
						});
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.times {
		font-size: 40rpx;
		color: #fff;
		font-weight: bold;
		width:94% ;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		border-bottom: 3rpx solid #4ccc8c;
		border-top: 3rpx solid #4ccc8c;
		margin: 0 auto;
		// font-family: 'Courier New', Courier, monospace;
	}

	// 店铺样式
	.store_box {
		width: 680rpx;
		padding-top: 20rpx;
		// margin-top: -60rpx;
		z-index: 100;

		.store {
			width: 94%;
			margin: 0 auto;
			margin-bottom: 20rpx;
			z-index: 999;
			color: #fff;
			// background-color: #fff;
			// box-shadow: 0px 0px 16rpx 0px rgba(223, 223, 223, 0.5);
			// border: 3rpx solid #dadbdc;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			box-sizing: border-box;

			.left {
				// width: 130rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title {
					display: flex;
					align-items: center;

					.businessStatus {
						border: 2rpx solid #fff;
						color: #fff;
						font-size: 20rpx;
						text-align: center;
						padding: 2rpx;
						margin-left: 12rpx;
					}
				}

				.address {
					margin: 6rpx 0;
				}

				.time {
					font-size: 24rpx;
					color: #fff;
				}

				image {
					width: 100rpx;
					height: 100rpx;
					border: 1px solid #f5f5f5;
					border-radius: 100%;
				}
			}

			.right {

				display: flex;
				align-items: center;

				.right-box {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 60rpx;
					height: 60rpx;
					border-radius: 100%;
					background-color: #fff;
				}
			}
		}
	}

	.content {
		padding-bottom: 140rpx;
	}

	.details_box,
	.content {
		min-height: 100vh;
	}

	.order_head_box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;
		background-color: #fff;
		border-bottom: 3rpx solid #f5f5f5;

		.status {
			display: flex;
			align-items: center;
			color: #1c1c1c;
			font-size: 42rpx;
			font-weight: bold;
			line-height: 70rpx;

			aicon {
				width: 70rpx;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			span {
				padding-left: 10rpx;
			}
		}

		.text {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			color: #666;
			padding-top: 20rpx;

			/deep/.u-count-down__text {
				font-size: 26rpx;
				color: #666;
				padding: 0 4rpx;
			}
		}
	}

	.menu_box {
		width: 100%;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 20rpx;
		// margin-bottom: 30rpx;

		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			width: 90%;
			margin: 0 auto;

			.left {
				color: #1c1c1c;
				font-size: 30rpx;
				font-weight: bold;
				line-height: 30rpx;
				display: flex;
				align-items: center;
			}

			.right {
				color: #999;
				display: flex;
				align-items: center;
				font-size: 26rpx;
				line-height: 26rpx;
			}
		}

		.data {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 60rpx;
			margin: 0 auto;
			width: 90%;
			color: #404040;
		}

		.goods_box {
			padding-bottom: 30rpx;

			.goods {
				width: 90%;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					width: 180rpx;

					image {
						width: 160rpx;
						height: 160rpx;
						border-radius: 20rpx;
					}
				}

				.right {
					flex: 1;
					min-width: 0;
					height: 150rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.goodsSpecification {
						position: relative;
						display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
						-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式
						-webkit-line-clamp: 2; //一个块元素显示的文本的行数
						overflow: hidden; //溢出隐藏

						.num {
							// position: absolute;
							// bottom: -70rpx;
							// left: 0;
						}
					}

					.title {
						color: #1c1c1c;
						font-size: 30rpx;
						height: 52rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.text {
						color: #999;
						font-size: 26rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.price {
						display: flex;
						align-items: center;
						justify-content: space-between;
						// padding-bottom: 10rpx;

						.num {
							color: #1c1c1c;
							font-size: 30rpx;
							display: flex;
							align-items: center;

							span {
								font-size: 28rpx;
								padding-left: 2rpx;
							}
						}

						.buy {
							color: #1c1c1c;
							font-size: 28rpx;
						}
					}
				}
			}
		}

		.info_box {
			padding: 10rpx 0 20rpx;

			.label {
				width: 90%;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;
				margin-bottom: 30rpx;
				color: #666;

				.refund-text {
					width: 100%;
					text-align: center;
					color: #666;
				}

				.tit {
					width: 130rpx;
					color: #666;
				}

				.txt {
					flex: 1;
					min-width: 0;
					text-align: right;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					color: #1c1c1c;
				}
			}

			.order_foot {
				border-top: 1px solid #f5f5f5;

				.label {
					display: flex;
					align-items: center;
					width: 90%;
					margin: 0 auto;
					justify-content: space-between;
					height: 100rpx;
					font-weight: bold;
					font-size: 30rpx;
					margin-bottom: 0;

					.tit {
						color: #1c1c1c;
					}
				}
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		background-color: #fff;
		padding-bottom: env(safe-area-inset-bottom);
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;

		.label {
			display: flex;
			align-items: center;
			// justify-content: center;
			height: 120rpx;
			width: 100%;

			.button {
				width: 92%;
				margin: 0 auto;
				height: 80rpx;
				border-radius: 100rpx;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				font-size: 32rpx;
				position: relative;
				font-weight: bold;

			}
		}
	}
</style>
